<template>
  <div>
    <div class="order-body" >
      <el-form size="mini" :inline="true" >
        <el-form-item label="保单号" >
          <el-input placeholder="请输入保单号" v-model="order_no" ></el-input>
        </el-form-item>
        <el-form-item label="被保企业" >
          <el-input placeholder="请输入被保企业" v-model="qy_name" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" icon="el-icon-search" @click="changePage(1)" >查询</el-button>
        </el-form-item>
      </el-form>
      <window-title title="报案列表" >
        <el-button size="mini" type="danger" icon="el-icon-plus" style="float: right;margin-top: 5px" @click="addModels()" >报案</el-button>
      </window-title>
      <el-table border size="mini" :data="list.data" style="margin-top: 10px" :header-cell-style="{
    'background-color': '#ebeef5',
    'color' : '#333333'
}">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column label="保险方案" prop="bx_name" ></el-table-column>
        <el-table-column label="被保人" prop="insure" ></el-table-column>
        <el-table-column label="出险地址" >
          <template slot-scope="item" >
            {{item.row.cx_province}}{{item.row.cx_city}}{{item.row.cx_area}}{{item.row.cx_address}}
          </template>
        </el-table-column>
        <el-table-column label="事故简述" prop="memo" ></el-table-column>
        <el-table-column label="状态"  >
<!--          1审核中2待上传3上传待审核4带邮寄5已发件6已完成7审核拒绝8上传拒绝-->
          <template slot-scope="item" >
            <span style="color: #F16D61">{{ state_arr[item.row.state] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="理赔金额" prop="price" ></el-table-column>
        <el-table-column label="操作" width="100px"  >
        <template slot-scope="item" >
          <el-button size="mini" type="text" v-if="item.row.state == 2 || item.row.state == 8" @click="addCailiao(item.row.id,item.row.order_id)" >上传材料</el-button>
          <el-button size="mini" type="text" v-else-if="item.row.state == 4" @click="addCailiao(item.row.id,item.row.order_id)" >待邮寄</el-button>
          <el-button size="mini" type="text" v-else @click="addCailiao(item.row.id,item.row.order_id)" >查看</el-button>
        </template>

        </el-table-column>
      </el-table>
      <div class="page-box">

        <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="add_model" title="添加报案" width="800px" :append-to-body="true" >
      <div>
        <el-form size="mini" :inline="true" >
          <el-form-item label="保单号" >
            <el-input placeholder="请输入保单号" v-model="order_no1" ></el-input>
          </el-form-item>
          <el-form-item label="被保企业" >
            <el-input placeholder="请输入被保企业" v-model="qy_name1" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="com-btn" icon="el-icon-search" @click="changePage1(1)" >查询</el-button>
          </el-form-item>
        </el-form>
        <window-title title="保单列表" ></window-title>
<!--        <el-tabs v-model="order_state" @tab-click="changePage1(1)">-->
<!--          <el-tab-pane label="全部" name="0"></el-tab-pane>-->
<!--          <el-tab-pane label="有效" name="1"></el-tab-pane>-->
<!--          <el-tab-pane label="已失效" name="2"></el-tab-pane>-->
<!--        </el-tabs>-->
        <el-table border size="mini" :data="order_list.data" style="margin-top: 10px" :header-cell-style="{
    'background-color': '#ebeef5',
    'color' : '#333333'
}">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column label="保险单号" prop="bd_no" ></el-table-column>
          <el-table-column label="保险方案" prop="bx_name" ></el-table-column>
          <el-table-column label="被保人" prop="insure" ></el-table-column>
          <el-table-column label="保险期限" >
            <template slot-scope="item" >
              <div>{{item.row.start_time}}</div>
              <div>{{item.row.end_time}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px"  >
            <template slot-scope="item" >
              <el-button size="mini" class="com-btn" @click="trueAn(item.row)" >确定报案</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">

          <el-pagination
              background
              small
              :current-page="order_list.current_page"
              :page-size="order_list.per_page"
              layout="total, prev, pager, next, jumper"
              :total="order_list.total"
              @current-change="changePage1"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from '../../components/title/title.vue';

export default {
  components:{ windowTitle },
  data(){
    return {
      order_no : '',
      qy_name : '',
      order_no1 :'',
      qy_name1:'',
      list:{
        data:[],
        current_page : 1
      },
      add_model : false,
      order_state : '0',
      order_list:{
        data:[],
        current_page : 1
      },
      state_arr:['','审核中','待上传','上传待审核','待邮寄','已发件','已完成','审核拒绝','上传拒绝']
    }
  },
  mounted() {
    this.getData();
    this.getOrder();
  },
  methods:{
    addCailiao(id,bx_id){
      this.$router.push({
        path:'/index/pei/form/'+bx_id,
        query:{
          id:id
        }
      });
    },
    trueAn(data){
      this.$router.push({
        path : '/index/pei/form/'+data.id
      });
    },
    addModels(){
      this.add_model = true;
    },
    changePage(e){
      this.list.current_page = e;
      this.getData();
    },
    changePage1(e){
      this.order_list.current_page = e;
      this.getOrder();
    },
    getOrder(){
      this.ajaxs('report/order',{
        data:{
          page : this.list.current_page,
          name : this.qy_name1,
          bd_no : this.order_no1

        },
        success:(res) => {
          this.order_list = res.msg;
          // this.add_model = true;
        }
      })
    },
    getData(){
      this.ajaxs('report/index',{
        data:{
          page : this.list.current_page,
          name : this.qy_name,
          bd_no : this.order_no

        },
        success:(res) => {
          this.list = res.msg;
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/order/list.css');
</style>